<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>创建/编辑社群</h1>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div class="formlist">
      <div class="item ">
        <div class="left">
          社群名称<img src="../../assets/images/mkf/must.png" />
        </div>
        <div class="right">
          <input type="text" placeholder="请输入中英文名称" v-model="name" />
        </div>
      </div>
      <div class="item ">
        <div class="left">
          社群logo<img src="../../assets/images/mkf/must.png" />
        </div>
        <div class="right upload">
          <div class="block">
            <div class="no">
              <img src="../../assets/images/mkf/add.png" /><span>上传</span>
            </div>
            <!-- 已选择 -->
            <!-- <img class="yes" src="../../assets/images/adver.jpg" /> -->
          </div>
        </div>
      </div>
      <div class="item ">
        <div class="left">
          所属行业<img src="../../assets/images/mkf/must.png" />
        </div>
        <div class="right" @click="showPicker = true">
          <div class="choose">
            <span class="txt" v-if="trade != ''" style="color: #fff;">{{
              trade
            }}</span>
            <span class="txt" v-else>请选择</span>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          申请名片<img src="../../assets/images/mkf/must.png" />
        </div>
        <div class="right">
          <div class="choose" @click="$router.push('/card')">
            <span class="txt">请选择用于该社群的个人名片</span>
          </div>
          <!-- 已选择名片 -->
          <!-- <div class="card">
						<img class="head" src="../../assets/images/adver.jpg" />
						<div class="info">
							<p class="name line1">麻小云</p>
							<p class="des line1">阿里巴巴创始人/慈善会会长/蚂蚁阿里巴巴创始人/慈善会会长/蚂蚁</p>
						</div>
					</div> -->
        </div>
      </div>
      <div class="item smaller">
        <div class="left">社群slogan</div>
        <div class="right">
          <textarea placeholder="请输入" v-model="slogan"></textarea>
        </div>
      </div>
      <div class="item smaller">
        <div class="left">社群宗旨</div>
        <div class="right">
          <textarea placeholder="请输入" v-model="aim"></textarea>
        </div>
      </div>
    </div>
    <div class="btn" @click="doSubmit">
      ￥19.8立即创建<span>（原价￥1980）</span>/ 确认修改
    </div>

    <!-- 选择行业 -->
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        title=""
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { Popup } from "vant";
import { Picker } from "vant";
export default {
  name: "Edit",
  components: {
    vanPicker: Picker,
    vanPopup: Popup
  },
  data: function() {
    return {
      name: "", //社群名称
      slogan: "", //slogan
      aim: "", //宗旨
      showPicker: false,
      trade: ""
    };
  },
  mounted: function() {
    this.columns = ["餐饮", "房地产", "服务", "服装业", "健康"];
  },
  methods: {
    doSubmit() {
      console.log("doSubmit");
    },
    onConfirm(value, index) {
      this.showPicker = false;
      this.trade = value;
      console.log(`当前值：${value}, 当前索引：${index}`);
    }
  }
};
</script>

<style scoped>
.formlist {
  padding-bottom: 1.2rem;
}

.btn {
  width: 100%;
  height: 0.98rem;
  line-height: 0.98rem;
  text-align: center;
  background-color: #deaa8a;
  font-size: 0.32rem;
  font-weight: bold;
  color: #2a2631;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
}

.btn span {
  text-decoration: line-through;
}
</style>
<style>
.van-picker {
  background-color: #32303a;
}
.van-picker__cancel,
.van-picker__confirm {
  color: #999999;
}
.van-picker__cancel:active,
.van-picker__confirm:active {
  background-color: rgba(255, 255, 255, 0.1);
}
.van-picker-column__item {
  color: rgba(255, 255, 255, 1);
}
.van-hairline--top-bottom::after {
  border-width: 0;
}
.van-picker__mask {
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(50, 48, 58, 0.9)),
      to(rgba(50, 48, 58, 0.4))
    ),
    -webkit-gradient(linear, left bottom, left top, from(rgba(50, 48, 58, 0.9)), to(rgba(50, 48, 58, 0.4)));
  background-image: linear-gradient(
      180deg,
      rgba(50, 48, 58, 0.9),
      rgba(50, 48, 58, 0.4)
    ),
    linear-gradient(0deg, rgba(50, 48, 58, 0.9), rgba(50, 48, 58, 0.4));
}
.van-picker__frame {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
